<template>
  <el-dialog
    v-model="visibility"
    title="新增链路"
    append-to-body
    draggable
    :close-on-click-modal="false">
    <el-select
      v-model="linkValue"
      placeholder="请选择链路"
      clearable>
      <el-option
        v-for="item in linkList"
        :key="item.value"
        :label="item.label"
        :value="item.value" />
    </el-select>
    <template #footer>
      <div>
        <el-button @click="visibility = false">{{ config.button.text.close }}</el-button>
        <el-button
          type="primary"
          :disabled="!linkValue"
          @click="saveEvent">
          {{ config.button.text.save }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from "vue";
import config from "@/common/element-plus/config";
import { purchaseNodeType } from "@/common/enum/purchase-order";

const visibility = ref(false)
// 选择的链路
const linkValue = ref()
// 链路
const linkList = ref([{
  value: "",
  label: "",
},{
  value: "",
  label: "",
}])

watch(() => visibility.value, (val) => {
  if (val) {
    linkList.value[0].value = Object.keys(purchaseNodeType)[3]
    linkList.value[0].label = purchaseNodeType[Object.keys(purchaseNodeType)[3]]
    linkList.value[1].value = Object.keys(purchaseNodeType)[4]
    linkList.value[1].label = purchaseNodeType[Object.keys(purchaseNodeType)[4]]
  }
})

const emits = defineEmits(["saveLink"])

const saveEvent = () => {
  emits("saveLink", linkValue.value)
  linkValue.value = ""
  visibility.value = false
}

defineExpose({ visibility })
</script>

<style lang="scss" scoped></style>
